Introduction to XML

Introduction

Welcome back! CSS style sheets are great for many formatting tasks, but if you need more powerful transformations of raw XML data, XSL (Extensible Style Sheet Language) is the solution.

XSL does everything CSS does—centering, coloring, and otherwise formatting text—and more. It includes techniques such as sorting, creating tables and lists, and inserting literal text and HTML code right into the style sheet itself. But as you probably suspect, there's a price for these extra features:

XSL is harder to learn and use than CSS.

We'll walk through it slowly in this lesson, though. You'll learn to use XSL to transform unprocessed, unformatted XML content from the recipes.xml document into a table or numbered list in IE.

And I'll also show you how to add an important capability to the cookbook program: searching. Users expect to be able to type in a word or phrase and have the computer provide a list of all the recipes containing the search term. Many computer programs include a search feature, and you certainly don't want to leave it out of the cookbook!

Okay, ready to get started? I'll see you in Chapter 2!

Experimenting With Simple XSL Formatting

XSL has several uses that we'll explore in the next three lessons. In this lesson, we'll focus on using XSL's formatting to format XML elements for display in IE.

In some ways, XSL is similar to CSS, which we worked with in the last lesson. Both languages let you specify how to display your XML data to make it look consistent, attractive, and efficient.

But CSS and XSL do differ in important ways:

• CSS excels in formatting for a screen.
• XSL was originally designed for formatting books, brochures, and other printed matter (often PDF files), but you can use it to format for browsers as well.
• CSS uses its own code structure: element {property:value;}
• XSL is written like XML (and HTML): <element start tag>content</element end tag>
• CSS is easier to learn and use.

Essentially, CSS is simpler but less powerful than XSL.

Formatting for paper can often be more demanding than for screen. One primary difference is that you scroll screens but turn pages. So a browser rarely displays such things as headers, footers, and page numbers, but books and magazines usually include them.

Also, typesetting for paper can be more refined and complicated than for screen (hanging indents, for example). XSL includes tools to deal with these paper issues and also for special kinds of screen output.

So when do you use XSL instead of CSS? The W3C—the organization that sets worldwide standards for the Internet—says it this way:

"Use CSS when you can; use XSL when you must."  

But even though you'll use CSS for most XML formatting, you should still know the basics of XSL so you'll feel comfortable working with this type of style sheet if you need to.

Let's start with a simple example. We'll display the recipes.xml data as a table in IE.

Formatting With XSL

We'll need to write an XSL style sheet file that (like a CSS file) describes how we want to format our original XML document. Then we'll put a reference to the XSL style sheet in our XML document.

When we open the XML document in a browser, the browser locates the linked XSL file and then displays the XML according to our XSL style sheet's rules.

Okay, to see XSL in action, let's create a style sheet with the following rules:

• Center the headline.
• Create a table with two columns.
• Use a light blue background for the column headers.
• Use a light yellow background for the titles.

Follow these steps to link the XSL style sheet to recipes.xml:

1. Open your recipes.xml file in Notepad. (You can use VS if you prefer.)
2. To link this XML data to your XSL file, type (or paste) this highlighted line of code into the second line in the recipes.xml file as shown:

<?xml version="1.0" encoding="utf-8"?>


    <?xml-stylesheet type="text/xsl" href="recipes.xsl"?>


    <!--These recipes are used with the Cookbook program-->


    <cookbook>


      <recipe>


        <title>The Secret to Perfect Coleslaw</title>


        <instructions>


    To prevent the slaw from getting runny or turning grey, mix 1

3. Save the recipes.xml file by pressing CRTL + S in Notepad.
4. Close Notepad, and then open it again. It should now be empty.
5. Now create the XSL code by copying and pasting the following into Notepad:

6. In Notepad, choose File > Save As, and save this code with the filename recipes.xsl. Save it in the same folder as recipes.xml.
7. Now, in Windows Explorer, right-click recipes.xml, and choose Open In > Internet Explorer. (Or you can drag recipes.xml, and drop it into IE.)

You should now see your recipes formatted as a table, like this:

Our cookbook, now tabular

It's interesting that a good part of this XSL code is pure HTML. To better understand how you can mix HTML into XSL, let's separate the XSL file's code into two categories. We'll start with the HTML in that file, and then we'll look at the XSL.

Examining the HTML Elements

Here's the HTML part:

<html>


<body>


<center>


   <h2>Cookbook Displayed as a Table</h2>


</center>


<table border="1">


<tr bgcolor="lightblue">


                     <th>Title</th>


<th>Instructions</th>


</tr>


<tr>


       <td bgcolor="lightyellow" width="30%">


</td>


<td> </td>


</tr>


</table>


</body>


</html>

Let's take a quick look at this HTML:

• The <center> tags center the <h2> headline, as you would expect.
• The <table> tags specify that the browser should render the content in tabular format (columns and rows). The table also includes a border value of 1. Set it to 0, and the lines separating the columns and rows disappear. Set it to 5, and you get a thick frame around the table. Try using different values for the border attribute to see what looks best to you.
• A <tr></tr> element defines the first table row (a row is the horizontal set of cells in a table; columns are vertical). This <tr> element includes an attribute, bgcolor, to specify that the background color of this row should be light blue.
• This first row displays table headers <th>, so you just type in the words Title and Instructions.
• The next <tr> table row element is special. It is contained within an xsl:for-each block. It looks like this:
  
  

<xsl:for-each select="cookbook/recipe">


     <tr>


       <td bgcolor="lightyellow" width="30%">


<xsl:value-of select="title"/>


</td>


       <td>


<xsl:value-of select="instructions"/>


</td>


     </tr>


</xsl:for-each>

XSL's for-each element is like the For Each block in VB—it keeps looping (doing something to a set of data) until it finishes with the final item in the set. In this case, the loop goes through the recipes.xml file and displays each recipe's title and instructions.

And because this loop includes the HTML <tr> (table row) element, the browser will automatically create a new row to display each recipe.

Also within the xsl:for-each loop are a pair of <td> (table data) elements. The first one displays the title data and includes two attributes: a light yellow background color and a width of 30% of its container (therefore the instructions will be 70%). The second <td> data element displays the instructions.

All right, now that you have a sense of how HTML works within an XSL style sheet, let's look at the XSL code part of this same style sheet:

Examining the XSL Elements

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


<xsl:template match="/">


<xsl:for-each select="cookbook/recipe">


<xsl:value-of select="title"/>


<xsl:value-of select="instructions"/>


</xsl:for-each>

• The first line of XSL (beginning with xsl:stylesheet and ending with /Transform">) is just the usual set-it-and-forget-it announcement at the top of so many XML-related files (like the first line in an XML document: <?xml version="1.0" encoding="utf-8"?>). You have to insert these declarations to announce what type of file it is, but you don't need to modify them or even worry about exactly what they mean.

• The second XSL element, <xsl:template match="/">, tells the browser what to look for in the source document (recipes.xml). This "/" means the root element. In other words, you're telling the browser to: "Work with the contents of the root element." (All the recipes are contained within the root element, so you're saying that you want the browser to work with every recipe.)

• Now that you've specified the set of recipes to work with, you create a for-each loop to go through the set. The select attribute in the for-each tag select="cookbook/recipe" fetches each recipe element as the code loops. Remember, your recipe structure looks like this:

  <recipe>


<title></title>


<instructions>


</instructions>


  </recipe>

• Finally, two <xsl:value-of elements fetch and display the content of the title and instructions elements. And then the loop goes back up to process the next recipe.

Tip

Here's another way to think about how this example mixes XSL and HTML in the same style sheet. When the browser processes this code, it renders the HTML as is—just as any HTML code would be. But any XSL instructions (code that begins with xsl:) is processed according to the XSL language rules.

That was some pretty detailed explanation, I know. So let's do a quick review before we move on. Can you match the descriptions to the correct XSL element?

Listing, Sorting, and Formatting With XSL

Now let's experiment with some additional HTML formatting and also try an XSL transform—sorting the recipes.

We'll start by displaying the recipes as a numbered list. To do this, just replace the various <table> elements in the HTML code in the previous chapter with <li> (list) and <ol> (ordered list) elements, like this:

1. Start a new, empty Notepad, and copy and paste this code into it:

<?xml version="1.0" encoding="UTF-8"?>


<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">


 <xsl:template match="/">


   <html>


   <body>


<center>


   <h2>Cookbook Displayed as a List</h2>


</center>


<ol>


<xsl:for-each select="cookbook/recipe">


<li>


<xsl:value-of select="title"/>


<xsl:value-of select="instructions"/>


</li>


</xsl:for-each>


</ol> 


</body>


</html>


</xsl:template>


</xsl:stylesheet>

2. In Notepad, choose File > Save As, and save this code with the filename recipes.xsl (save it in the same folder as recipes.xml). Because the file recipes.xsl already exists in this directory, you'll see a message box asking if you want to replace it. Click Yes.
3. Now, in Windows Explorer, right-click recipes.xml, and choose Open In > Internet Explorer. (Or you can drag recipes.xml, and drop it into IE.)

You should see the recipes listed, like this:

Cookbook formatted as a list

This code is quite straightforward. You enclose your list with the HTML ordered list <ol>. By default, it's a numbered list, but your other options include letters and Roman numerals. Then, around each list item (title and instructions displayed as a unit), you use the <li> tag.

Alphabetizing Your List

As you know, you can almost always improve on your first attempt at formatting. For one thing, recall that the XML document doesn't keep its data alphabetized. Each recipe element is stored just in order of when you added it to the bottom of the document. In VB, alphabetizing was merely a matter of setting the listbox's Sorted property to True.

In XSL, you alphabetize by inserting this code:

<xsl:sort select="title"/>

Make this improvement by adding the highlighted line of code below in the <ol> section of your recipes.xsl file:

<ol>


<xsl:for-each select="cookbook/recipe">


<xsl:sort select="title"/>


<li><xsl:text>TITLE: </xsl:text>


<xsl:value-of select="title"/>


<xsl:text>    INSTRUCTIONS: </xsl:text>


<xsl:value-of select="instructions"/></li>


</xsl:for-each>


</ol>

Now save this file from Notepad, switch to IE, and press F5 to refresh the page. You should now see the recipes alphabetized, like this:

Listed items sorted alphabetically

Tip

You might be thinking that using a browser to view XML is similar to using the VB cookbook project. The browser can now alphabetize, for example. And browsers can also search—just press CTRL + F and type salt or some other search term. The browser will highlight all instances of that word.

So yes, a browser can format, sort, and search XML data. But the VB program can do all that and quite a bit more—delete, modify, and even import new recipes from the Windows clipboard.

As you can see in the image above, the title butts up right against the instructions. That doesn't look too great, and it's inefficient too. Users sometimes want to scroll down through the recipes, skipping from title to title, until they find the one they're after. You shouldn't bury the title inside the body text.

So make your next improvement to the formatting by employing the <xsl:text> element to label the titles and instructions, like this:

<ol>


<xsl:for-each select="cookbook/recipe">


<xsl:sort select="title"/>


<li><xsl:text>TITLE: </xsl:text>


<xsl:value-of select="title"/>


<xsl:text>    INSTRUCTIONS: </xsl:text>


<xsl:value-of select="instructions"/></li>


</xsl:for-each>


</ol>

Use <xsl:text> when you want to insert literal text, like these labels, into a section of xsl code. 

Titles and instructions clearly labeled

That's an improvement, but we can do even better. Try inserting some whitespace using the HTML <p> (paragraph) tag:

<li>


<p><xsl:value-of select="title"/>


</p>


<xsl:text>Instructions: </xsl:text>


<xsl:value-of select="instructions"/>


</li> 

List with whitespace

Using whitespace is almost always a wise move. In this example, the whitespace visually isolates the recipes from each other and separates the titles from the instructions. Your XML data is now easy to read and easy to scan. And if you want to emphasize the titles even further, you could add HTML tags like <big> to enlarge the text size or <u> to underline it:

<p><u><xsl:value-of select="title"/></u></p>

Instructions accentuated with underlining

Let's Chat!

How do you feel about whitespace? Do you think it clarifies text or just takes up room? Do you agree that most people find whitespace makes reading easier for them?

Join me and your classmates in the Discussion Area to share your opinion.

Because we'll continue to work with the recipes.xml document in future lessons, let's remove the style sheet link to restore the file to its original state:

1. In Notepad, remove this highlighted XSL reference line of code from the recipes.xml file:

<?xml version="1.0" encoding="utf-8"?>


<?xml-stylesheet type="text/xsl" href="recipes.xsl"?>


<!--These recipes are used with the Cookbook program-->


<cookbook>

2. Save the recipes.xml file by pressing CRTL + S in Notepad.

At this point, you should have a good idea how to mix HTML with XSL to create the presentation you're after when displaying XML in browsers.

Downloading All Projects for This Course

Let's now download all of the projects for the rest of this course. I'll explain why in a minute. Click this button to start the download of a self-extracting Zip file named L5 thru L12 Finished.zip:

Now follow these steps to save the folders you used in this course to your C:\drive:

1. If you're using Internet Explorer, a small dialog box opens asking if you want to Save this file. Click Save. (If you're a Firefox user, select the Save File option in the download dialog box, and then click OK.)
2. After the download is finished, click the Open Folder button in the same IE dialog box. This will show you where the downloaded L5 thru L12 Finished.zip file is located. If you use a different browser, locate the L5 thru L12 Finished.zip file using Windows File Explorer.
3. Copy the L5 thru L12 Finished.zip file to your C:\ drive.
4. Right-click C:\L5 thru L12 Finished.zip. A dialog box opens.
5. Click the Extract button in the dialog box.

You should now see eight new XML Finished folders in your C:\ drive, one for each lesson from L5 to L12:

Eight new folders

These folders contain the finished projects as they are at the end of each lesson.

Why did we download all these projects? From now on, you'll have a choice in how you want to work adding features to the cookbook and other projects. You can build the projects by hand, as described in each lesson—this will improve your skills using the editor's Design, Code, and Properties windows. Or if you don't need practice working with the editor, you can just follow along using the projects that I already created (you'll find these in the folders for each lesson you just downloaded—XML L5 Finished, XML L6 Finished, and so on.)

For example, in the next chapter, we'll add a search feature to the cookbook project. This requires adding controls in the VB editor's Design window, entering code in the Code window, and modifying properties in the Properties window. If you feel that you've already mastered these editor techniques, you can simply skip these editor activities and use the finished projects instead. Just study the concepts to learn how the new search feature is implemented. If you want to take this approach in this lesson now, double-click the cookbook.sln file in the XML L5 Finished folder that you just downloaded. This opens the cookbook project as it will be at the end of this lesson.

But if you do want to practice working hands-on with the editor, double-click the cookbook.sln file in the XML Projects folder that you worked with in previous lessons.

Okay, now let's add a search feature!

Adding a Search Feature to the Cookbook

What good is a database if you can't search it? One of the most powerful aspects of computing is how quickly you can get information. You don't have to find a book, look in its index, and then track down a page number. Just type your search term into a program, and instantly see the results.

To add a search feature to the cookbook, you first need to add a textbox where the user can type in what he or she is searching for:

1. Open your cookbook project, either in the C:\XML Projects folder (to practice with the editor) or in the C:\XML Projects L5 folder. If you don't need that practice, skip the next few paragraphs to the screen recording below, and go to the Design window (press SHIFT F7).
2. Double-click textbox in the Toolbox to add a textbox control to the form.
3. Drag the textbox down to position it below the listbox.
4. Drag the textbox's little white selection boxes until it is as wide as the listbox.
5. In the Properties window, change the textbox's Name property to txtSearch.
6. Click the small plus sign next to Font in the Properties window.
7. Change the textbox's font size from the default 8.25 to 12.

Now let's add a button to the form. (You'll use this button in the next lesson, so don't worry about its code for now.)

1. Click the Exit button to select it.
2. Press CTRL + C to copy the Exit button.
3. Press CTRL + V to paste the button into the form.
4. Move the button down next to the txtSearch textbox.
5. Resize the button so it's the same size as the txtSearch textbox.
6. In the Properties window, change the button's Name property to btnShowAllTitles.
7. Change the button's caption (text property) to Show All Titles.

Your cookbook should now look like this:

Search text field added

Now we'll add the code that searches your recipes.xml document:

1. Switch to the Code window by double-clicking the Show All Titles button. (This creates a btnShowAllTitles_Click event where we'll put some code in a later lesson.)
2. Click your mouse pointer just above the Private Sub btnShowAllTitles_Click line of code. This positions your blinking vertical line insertion cursor in the right place to paste the search Sub.
3. Copy the following search Sub code, and then switch to the Code window and paste it:

Okay, now let's take a few minutes to break down that code.

Click here to download the video transcript